/*
 * @Author: luoqi
 * @Date: 2022-04-04 13:33:57
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-12 19:26:15
 * @Description: 
 */
/*
 * @Author: luoqi
 * @Date: 2022-04-04 13:18:58
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-04 13:27:23
 * @Description: 
 */
import React,{ useState } from 'react';
import {  Button,Modal,Form, Input, Radio,Select,Upload, message } from 'antd';
import {  PlusOutlined, UploadOutlined } from '@ant-design/icons';
import axios from '../../utils/axios'
import qs from 'qs'
const { Option } = Select;


const AddAdmin = (props) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [value, setValue] = React.useState(1);
  const [form1]=Form.useForm()
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    form1.submit()
    
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const onFinish = (values) => {
    console.log('Success:', values);
    let {name,password,phone,qrPassword,status}=values
    if(password===qrPassword){
       axios({
      url:'/admin/upsert',
      method:'post',
      data:qs.stringify({
        id:null,
        username:name,
        password,
        phone,
        status:status===0?false:true
      })
    }).then(res=>{
      console.log(res);
      props.setNum(1)
      setIsModalVisible(false);
    })
    }else{
      message.error('前后密码不一致！');
    }
 
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const onChange = e => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  return (
    <div>
            <Button type="success" icon={<PlusOutlined />} onClick={showModal}>
        添加
      </Button>
      <Modal title="添加管理员" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确定"
            cancelText="取消">
        <Form
          name="basic"
          form={form1}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          initialValues={{status:1}}
        >
          <Form.Item
            label="管理员用户名"
            name="name"
            rules={[{ required: true, message: '请输入用户昵称' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="管理员手机号"
            name="phone"
            rules={[{ required: true, message: '请输入正确的用户手机号' ,pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,}]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="管理员密码"
            name="password"
            rules={[{ required: true, message: '请输入用户密码' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认密码"
            name="qrPassword"
            rules={[{ required: true, message: '请输入用户密码' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="管理员状态"
            name="status"
          >
            <Radio.Group onChange={onChange} value={value} >
              <Radio value={1}>可用</Radio>
              <Radio value={0}>不可用</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default AddAdmin;
